<template>
  <div class="warp">
    <div class="title-bar">
      <div class="left-p">
        今日入场车辆
        <div class="num-bg txtBlue">
          <ul>
            <li v-for="num in carEntryNumArr" :key="num.id">{{num}}</li>
          </ul>
        </div>
      </div>
      <div class="right-p">
        <div class="right-title">今日出场车辆</div>

        <div class="num-bg txtGreen">
          <ul>
            <li v-for="item in carExitNumArr" :key="item.id">{{item}}</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="list-thead">
      <table>
        <col width="30%" />
        <col width="20%" />
        <col width="20%" />
        <col width="15%" />
        <col width="15%" />
        <thead>
          <tr>
            <td>时间</td>
            <td>车牌号</td>
            <td>出入口</td>
            <td>进出</td>
            <td>车辆类型</td>
          </tr>
        </thead>
      </table>
    </div>

    <div class="list">
      <table>
        <col width="30%" />
        <col width="20%" />
        <col width="20%" />
        <col width="15%" />
        <col width="15%" />
        <tbody>
          <tr v-for="(item,index) in listArr" :key="index">
            <td>{{item.entryTime}}</td>
            <td>{{item.carNumber}}</td>
            <td>{{item.entryName}}</td>
            <td v-if="item.entryFlag === 1" class="in">进场</td>
            <td v-else class="out">出场</td>
            <td v-if="item.carType === 1" class="in">常驻车辆</td>
            <td v-else class="out">临时车辆</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>
</template>
<script>
export default {
  props: ['inCount', 'outCount', 'carList'],
  data () {
    return {
      carBeanList: '',
      carEntryNum: '', // 今日进场车辆总数
      carExitNum: '', // 今日出场车辆总数
      carEntryNumArr: '', // 今日进场车辆总数拆分数组
      carExitNumArr: '', // 今日出场车辆总数拆分数组
      listArr: [],
      isEntry: 'in',
      currCarTypeColor: 'in'
    }
  },
  mounted () {
    //
  },
  watch: {
    inCount (val) {
      this.carEntryNumArr = val.toString().split('')
    },
    outCount (val) {
      this.carExitNumArr = val.toString().split('')
    },
    carList (val) {
      this.listArr = val
    }
  }

}
</script>
<style lang="less" scoped>
.skin-white {
  .title-bar {
    color: #4c6072 !important;
  }
  .num-bg {
    li {
      color: rgb(104, 104, 104);
      background-color: rgb(240, 240, 240) !important;
    }
  }
  .list-thead table thead {
    color: rgb(104, 104, 104);
    background-color: rgb(244, 244, 244) !important;
  }
  .list table tbody {
    color: rgb(104, 104, 104);
    .in {
      color: #50e3c2;
    }
    .out {
      color: rgb(244, 136, 172);
    }
  }
}
.warp {
  flex: 1;
  // width: 100%;
  height: 100%;
  padding: 16px 20px;
  border-radius: 4px;
  box-sizing: border-box;
  background: rgba(43, 54, 72, 0.8);
  margin-bottom: 10px;
}

.title-bar {
  width: 100%;
  height: 36px;
  line-height: 36px;
  color: #fff;
  .left-p,
  .right-p {
    position: relative;
    z-index: 2;
    min-width: 240px;
  }
  .left-p {
    float: left;
  }
  .right-p {
    margin-right: -10px;
    float: right;
    text-align: right;
  }
  .txtBlue,
  .txtGreen {
    font-size: 32px;
    line-height: 32px;
    margin-left: 2px;
  }
  .txtBlue {
    color: #50e3c2;
  }
  .txtGreen {
    color: #b8e986;
  }
  .num-bg {
    position: absolute;
    z-index: 1;
    top: 0;
    span {
      display: inline-block;
      padding: 2px 4px 4px;
      border-radius: 4px;
      background-color: rgba(0, 0, 0, 0.3);
    }
    ul {
      display: inline-block;
      li {
        float: left;
        padding: 2px 4px 4px;
        margin-right: 4px;
        border-radius: 4px;
        background-color: rgba(0, 0, 0, 0.3);
      }
    }
  }
  .left-p .num-bg {
    left: 101px;
  }
  .right-p .num-bg {
    right: 9px;
  }
  .right-title {
    position: absolute;
    right: 154px;
  }
}

.list-thead {
  margin-top: 20px;
  overflow-x: hidden;
  width: 100%;
  table {
    width: 100%;
    td {
      text-align: center;
    }
    thead {
      background-color: rgba(0, 0, 0, 0.2);
      width: 100%;
      height: 24px;
      line-height: 24px;
      font-size: 12px;
      color: #50e3c2;
      letter-spacing: 0.29px;
    }
  }
}

.list {
  margin: 20px 0;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 100%;
  height: 62%;
  table {
    width: 100%;
    td {
      text-align: center;
    }
    tbody {
      margin-top: 10px;
      color: #9facc3;
      letter-spacing: 0.29px;
      td {
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }
      .in {
        color: #50e3c2;
      }
      .out {
        color: #b8e986;
      }
    }
  }
}

.list::-webkit-scrollbar {
  width: 0 !important;
}

//chrome 和Safari
.list {
  -ms-overflow-style: none;
}

//IE 10+
.list {
  overflow: -moz-scrollbars-none;
}

//Firefox
</style>
